<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/rem.js"></script>
    <script src="js/swiper.min.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/homePage.css">
</head>

<body>
    <div class="main">
        <!-- Swiper -->
        <div class="swiper-container">
            <!--头部定位 和搜索-->
            <div class="pageHead">
                <div class="location">全国</div>
                <div class="search"></div>
            </div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/banner.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/banner.jpg" alt="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- Initialize Swiper -->

        <!--公告开始-->
        <div class="notice">
            <div class="notice-tit">8339.4KGS/2000间包装 帐篷拍卖公告</div>
            <div class="notice-date">发表日期：2017-06-15 19:04:30</div>
            <div class="more">更多</div>
        </div>
        <!--公告结束-->

        <!--公示商品开始-->
        <div class="publicity">
            <div class="publicity-head">
                公示商品
                <div class="more">更多</div>
            </div>
            <div class="publicity-info">
                <div class="publicity-list">
                    <div class="publicityImg">
                        <img src="images/publicityImg.png" alt="">
                    </div>
                    <div class="info-box">
                        <div class="tit">127吨受损乙二醇</div>
                        <div class="bond">保证金：<span>￥10000</span></div>
                        <div class="date">开始日期：<span>2017-07-24</span></div>
                    </div>
                </div>
                <div class="publicity-list">
                    <div class="publicityImg">
                        <img src="images/publicityImg.png" alt="">
                    </div>
                    <div class="info-box">
                        <div class="tit">127吨受损乙二醇</div>
                        <div class="bond">保证金：<span>￥10000</span></div>
                        <div class="date">开始日期：<span>2017-07-24</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!--公示商品结束-->

        <!--tab 竞价交易 议价撮合 招投标 闪拍开始-->
        <!--竞价交易开始-->
        <div class="tab-box">
            <ul class="nav-box">
                <li class="nav-list nav-list-active">
                    <div>竞价交易</div>
                </li>
                <li class="nav-list">
                    <div>议价撮合</div>
                </li>
                <li class="nav-list">
                    <div>招投标</div>
                </li>
                <li class="nav-list">
                    <div>闪拍</div>
                </li>
            </ul>
            <div class="tab-con0">
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
                        <div class="money-info">
                            <div class="nowMoney">当前价：<span>$33,333,00/个</span></div>
                            <div class="business">竞价交易</div>
                        </div>
                        <div class="date-info">
                            <div class="time">开始时间：2017-07-24 16:00:00</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">大豆</div>
                        <div class="money-info">
                            <div class="nowMoney">当前价：<span>￥877,00/吨</span></div>
                            <div class="business">竞价交易</div>
                        </div>
                        <div class="date-info">
                            <div class="time">结束时间：2017-07-24 16:00:00</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">保证金测试1234567</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>VIP可见</span></div>
                            <div class="business">竞价交易</div>
                        </div>
                        <div class="date-info">
                            <div class="time timeEnd">已结束</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="load-box">
                    <b>加载中</b><span></span>
                </div>
            </div>
            <!--竞价交易结束-->

            <!--议价撮合开始-->
            <div class="tab-con1" style="display:none;">
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
                        <div class="money-info">
                            <div class="nowMoney">当前价：<span>暂无</span></div>
                            <div class="business">议价撮合</div>
                        </div>
                        <div class="date-info">
                            <div class="time">开始时间：2017-07-24 16:00:00</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">大豆</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>暂无</span></div>
                            <div class="business">议价撮合</div>
                        </div>
                        <div class="date-info">
                            <!-- <div class="time">结束时间：2017-07-24 16:00:00</div> -->
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">保证金测试1234567</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>VIP可见</span></div>
                            <div class="business">议价撮合</div>
                        </div>
                        <div class="date-info">
                            <div class="time timeEnd">已结束</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="load-box">
                    <b>加载中</b><span></span>
                </div>
            </div>
            <!--议价撮合结束-->

            <!--招投标开始-->
            <div class="tab-con2" style="display:none;">
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
                        <div class="money-info">
                            <div class="nowMoney">当前价：<span>暂无</span></div>
                            <div class="business">招投标</div>
                        </div>
                        <div class="date-info">
                            <div class="time">开始时间：2017-07-24 16:00:00</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">大豆</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>暂无</span></div>
                            <div class="business">招投标</div>
                        </div>
                        <div class="date-info">
                            <!-- <div class="time">结束时间：2017-07-24 16:00:00</div> -->
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">保证金测试1234567</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>VIP可见</span></div>
                            <div class="business">招投标</div>
                        </div>
                        <div class="date-info">
                            <div class="time timeEnd">已结束</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="load-box">
                    <b>加载中</b><span></span>
                </div>
            </div>
            <!--招投标结束-->

            <!--闪拍开始-->
            <div class="tab-con3" style="display:none;">
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
                        <div class="money-info">
                            <div class="nowMoney">当前价：<span>暂无</span></div>
                            <div class="business">闪拍</div>
                        </div>
                        <div class="date-info">
                            <div class="time">开始时间：2017-07-24 16:00:00</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">大豆</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>暂无</span></div>
                            <div class="business">招投标</div>
                        </div>
                        <div class="date-info">
                            <!-- <div class="time">结束时间：2017-07-24 16:00:00</div> -->
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="con-list">
                    <div class="shopImg">
                        <img src="images/shopImg.jpg" alt="">
                    </div>
                    <div class="shopInfo">
                        <div class="shopTit">保证金测试1234567</div>
                        <div class="money-info">
                            <div class="nowMoney">成交价：<span>VIP可见</span></div>
                            <div class="business">招投标</div>
                        </div>
                        <div class="date-info">
                            <div class="time timeEnd">已结束</div>
                            <div class="follow">11次围观</div>
                        </div>
                    </div>
                </div>
                <div class="load-box">
                    <b>加载中</b><span></span>
                </div>
            </div>
            <!--闪拍结束-->

            <!--卖家发布开始-->
            <div class="sellerBtn">卖家发布</div>
            <!--卖家发布结束-->
        </div>
        <!--tab 竞价交易 议价撮合 招投标 闪拍结束-->
    </div>

    <!--侧边按钮开始-->
    <div class="aside-box">
        <div class="goTopIcon"></div>
        <div class="phoneIcon"></div>
    </div>
    <!--侧边按钮结束-->

    <!--底部导航开始-->
    <footer>
        <div class="f-nav f-nav-active">
            <div class="navIcon homeIcon"></div>
            <div class="navTit">首页</div>
        </div>
        <div class="f-nav">
            <div class="navIcon typeIcon"></div>
            <div class="navTit">分类</div>
        </div>
        <div class="f-nav">
            <div class="navIcon myIcon"></div>
            <div class="navTit">我</div>
        </div>
        <div class="f-nav">
            <div class="navIcon moreIcon"></div>
            <div class="navTit">更多</div>
        </div>
    </footer>
    <!--底部导航结束-->
    <script>
        $(function () {
            $(window).load(function () {
                var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    autoplay: 5000,
                    autoplayDisableOnInteraction: false,
                    loop: true
                });
            });

            /*tab 切换*/
            $(".nav-list").click(function () {
                var idx = $(this).index();
                $(this).addClass("nav-list-active").siblings().removeClass("nav-list-active");
                $('div[class^="tab-con"]').hide();
                $(".tab-con" + idx).show();
            });

            /*底部 导航 切换*/
            $(".f-nav").click(function () {
                $(this).addClass("f-nav-active").siblings().removeClass("f-nav-active");
            });

            /*侧边的控制*/
            $(window).scroll(function () {
                var sTop = $(document).scrollTop();
                if (sTop > 100) {
                    $(".aside-box").show();
                } else if (sTop < 100) {
                    $(".aside-box").hide();
                }
            });

            /*回到顶部*/
            $(".goTopIcon").click(function () {
                $(document).scrollTop(0);
            });
        })
    </script>
</body>

</html>